<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工业数据采集系统</title>

    <script>
        async function sendRequest() 
        {
            // 发送网络请求
            var xhr = new XMLHttpRequest(); //创建http对象
            var url = "";
            xhr.open("post", url, true);//post表示请求方法，url表示url，true代表异步
            //需要提前设置好，收到响应后所进行的动作，只要设置好了，相应来了就会自动执行设置好的动作，这就是异步
            xhr.onreadystatechange = function () 
            {
                if (xhr.readyState == 4 && xhr.status == 200) 
                {
                    var response = xhr.responseText;
                    const data = response.split(' ');
                    document.getElementById('temperature').value = data[0];
                    document.getElementById('humidity').value = data[1];
                    
                }
            }
            xhr.send("wenshidu");
         
        }



        function LED(obj)
        {
            if (obj == 'kai') {
            var xhr=new XMLHttpRequest(); //创建http对象
            var url="";
            xhr.open("post",url,true);//post表示请求方法，url表示url，true代表异步
            xhr.send("LEDF01")
               
            }else{
            var xhr=new XMLHttpRequest(); //创建http对象
            var url="";
            xhr.open("post",url,true);//post表示请求方法，url表示url，true代表异步
            xhr.send("LEDF00")
            }
        }

        function FENG(obj)
        {
            if (obj == 'kai') {
            var xhr=new XMLHttpRequest(); //创建http对象
            var url="";
            xhr.open("post",url,true);//post表示请求方法，url表示url，true代表异步
            xhr.send("LEDF11");
               
            }else{
            var xhr=new XMLHttpRequest(); //创建http对象
            var url="";
            xhr.open("post",url,true);//post表示请求方法，url表示url，true代表异步
            xhr.send("LEDF10");
            }
        }

    </script>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #4CAF50;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"] {
            width: calc(100% - 22px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        .control-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .control-button {
            flex: 1;
            margin: 0 5px;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>工业数据采集系统</h1>

        <div class="form-group">
            <label for="temperature">温度数据:</label>
            <input type="text" id="temperature" placeholder="请输入温度数据" />
        </div>

        <div class="form-group">
            <label for="humidity">湿度数据:</label>
            <input type="text" id="humidity" placeholder="请输入湿度数据" />
        </div>

        <button onclick="sendRequest()">发送请求</button>

        <div class="control-buttons">
            <!-- <button class="control-button" onclick="toggleLight()">灯光控制</button>
            <button class="control-button" onclick="toggleBuzzer()">蜂鸣器控制</button> -->
            LED灯
            
            开：<input type="radio" name="LED" id="kai" onclick="LED(id)";>
            关：<input type="radio" name="LED" id="guan" checked="guan" onclick="LED(id)";>
            
            蜂鸣器控制
            
            开：<input type="radio" name="FENG" id="kai" onclick="FENG(id)";>
            关：<input type="radio" name="FENG" id="guan" checked="guan" onclick="FENG(id)";>

        </div>
    </div>

   

</body>

</html>